import { DownOutlined } from '@ant-design/icons';
import { Descriptions, Drawer, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { ExpandableConfig } from 'antd/es/table/interface';
import { connect } from 'dva';
import React, { useEffect } from 'react';

const mapStateToProps = (state: any) => ({
  basicService: state.basicService,
});
const _ViewModal: React.FC = (props: any) => {
  const { modalVisible, closeModal, data } = props;
  const columns: ColumnsType<any> = [
    {
      title: '服务接口元素名称',
      dataIndex: 'name',
      width: 150,
    },

    {
      title: '服务接口元素描述',
      dataIndex: 'desc',
      width: 150,
    },

    {
      title: '服务接口类型',
      dataIndex: 'type',
      width: 150,
    },
    {
      title: '服务接口元素标识符',
      dataIndex: 'flag',
      width: 150,
    },
    {
      title: '事件组',
      dataIndex: 'eventGroup',
      width: 150,
    },
    {
      title: '传输层协议',
      dataIndex: 'protocol',
      width: 150,
    },
  ];
  const childTableRender: ExpandableConfig<any>['expandedRowRender'] = record => {
    const columns: ColumnsType<any> = [
      {
        title: '参数名称',
        dataIndex: 'name',
        render: (value, record, index) => {
          return value ?? '--';
        },
      },
      {
        title: '参数描述',
        dataIndex: 'desc',
        render: (value, record, index) => {
          return value ?? '--';
        },
      },
      {
        title: '参数发送方向',
        dataIndex: 'parameter',
        render: (value, record, index) => {
          return value ?? '--';
        },
      },
      {
        title: '参考数据类型',
        dataIndex: 'dataType',
        render: (value, record, index) => {
          return value ?? '--';
        },
      },
    ];

    return (
      <Table
        size="small"
        rowKey="key"
        columns={columns}
        dataSource={record.params ?? []}
        pagination={false}
      />
    );
  };
  useEffect(() => {
    if (modalVisible) {
    }
  }, [modalVisible]);
  return (
    <Drawer
      title="详情"
      placement={'right'}
      width={1000}
      onClose={() => closeModal()}
      open={modalVisible}
    >
      <Descriptions title="基本信息" column={1}>
        <Descriptions.Item label="服务名称">{data.serviceName}</Descriptions.Item>
        <Descriptions.Item label="服务id">{data.serviceId}</Descriptions.Item>
        <Descriptions.Item label="服务描述">{data.desc}</Descriptions.Item>
        <Descriptions.Item label="服务命名空间">{data.nameSpace}</Descriptions.Item>
      </Descriptions>
        <Table
          className="add-server-table"
          size="small"
          rowKey="id"
          columns={columns}
          dataSource={data.methods ?? []}
          pagination={false}
          expandable={{
            expandedRowRender: childTableRender,
            expandIcon: props => {
              const { expanded, onExpand, record } = props;
              return (
                <DownOutlined
                  onClick={e => onExpand(record, e)}
                  rotate={expanded ? 180 : 0}
                  onPointerEnterCapture={() => {}}
                  onPointerLeaveCapture={() => {}}
                />
              );
            },
          }}
        />
    </Drawer>
  );
};
export const ViewModal = connect(mapStateToProps)(_ViewModal);
